import gsap from "gsap";
import * as THREE from "three";
console.log("🚀 ~ file: animation.js:3 ~ gsap:", gsap);

const scene = new THREE.Scene();

// box
const geometry = new THREE.BoxGeometry(1, 1, 1);

// material
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// mesh
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Axes helper
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// Sizes
const sizes = {
  width: 800,
  height: 600,
  aspect() {
    return this.width / this.height;
  },
};

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.aspect(), 0.1, 1000);
camera.position.set(0, 0, 2);

scene.add(camera);

// Renderer
let renderer;
export function init(canvas) {
  renderer = new THREE.WebGLRenderer({
    canvas,
  });

  renderer.setSize(sizes.width, sizes.height);
  return {
    animation: tick,
  };
}

// Clock
// const clock = new THREE.Clock();
gsap.to(mesh.position, {
  x: 2,
  delay: 1,
  duration: 1,
  // ease: "power2.inOut",
});
gsap.to(mesh.position, {
  x: 0,
  delay: 2,
  duration: 1,
  // ease: "power2.inOut",
});
// Animation
function tick() {
  // // 如果时间差大于等于目标帧率,则渲染
  // const elapsedTime = clock.getElapsedTime();

  // console.log("tick");
  // // mesh.rotation.x = elapsedTime * Math.PI * 2;
  // camera.position.x = Math.cos(elapsedTime);
  // camera.position.y = Math.sin(elapsedTime);

  renderer.render(scene, camera);

  requestAnimationFrame(tick);
}
